<template>
      <div class="new_calendar" v-if="newCalendarShow" @click.stop.prevent="">
    <div class="calendar_title">
      <div class="cadtitle_l">
        {{
            newCalendarTitle == 1
              ? "新建日程"
              : newCalendarTitle == 2
              ? "我的日程"
              : newCalendarTitle == 4
              ? "修改日程"
              : "日程提醒"
          }}
      </div>
      <Tooltip content="编辑日程" placement="bottom">
        <div class="cadtitle_r" v-if="newCalendarTitle != 1 && newCalendarTitle != 3">
          <span class="calendar_compile" @click.stop.prevent="newCalendarClick(4)"></span>
        </div>
      </Tooltip>
      <Tooltip content="删除日程" placement="bottom">
        <div class="cadtitle_r" v-if="newCalendarTitle != 1 && newCalendarTitle != 3">
          <span class="calendar_del" @click.stop.prevent="delSchedule"></span>
        </div>
      </Tooltip>
    </div>
    <div class="calendar_main">
      <div class="schedule_content">
        <span></span>
        <input type="text" v-model="scheduleText" placeholder="添加日程内容" v-if="newCalendarTitle == 1 || newCalendarTitle == 4" />
        <div v-else class="schedule_content_text">
          {{ currentAgenda.THEME ? currentAgenda.THEME : "无内容" }}
        </div>
      </div>
      <div class="schedule_loaction">
        <span></span>
        <input v-if="newCalendarTitle == 1 || newCalendarTitle == 4" type="text" v-model="scheduleAddress" placeholder="请输入地址" />
        <div v-else class="loacation_text">
          {{ currentAgenda.PLACE ? currentAgenda.PLACE : "无内容" }}
        </div>
      </div>
      <div class="schedule_people" v-if="newCalendarTitle != 3">
        <!-- 人员图标 -->
        <span></span>
        <div @click.stop.prevent="addReminders" v-if="newCalendarTitle == 1 || newCalendarTitle == 4" class="add_reminders_text">
          <span v-show="participant.length <= 0" class="add_reminders">添加提醒人</span>
          <template v-for="item in participant">
            {{ item.name ? item.name + ";" : "" }}
          </template>
        </div>
        <div v-else class="participant_text">
          {{ currentAgenda.NAME ? currentAgenda.NAME : "暂无添加人员" }}
        </div>
      </div>
      <div class="schedule_time">
        <span></span>
        <div class="schedule_time_wrap" v-if="newCalendarTitle == 1 || newCalendarTitle == 4">
          <template v-if="!isAllday">
            <!-- <Date-picker type="datetime" :value="startTime"  @on-change="startTimeChange" :options="datepickerOptions"  placeholder="开始时间" style="width: 155px;margin-right:3px;"></Date-picker>至
						<Date-picker type="datetime" :value="endTime"  @on-change="endTimeChange" :options="datepickerOptions"  placeholder="结束时间" style="width: 155px;margin-left:3px;"></Date-picker> -->
            <el-date-picker prefix-icon="none" :default-value="new Date()" v-model="startTime" value-format="yyyy-MM-dd HH:mm:ss" size="mini" type="datetime" :picker-options="datepickerOptions" @change="startTimeChange"
              placeholder="开始时间" style="width: 155px; margin-right: 3px; z-index: 9999"></el-date-picker>至
            <el-date-picker prefix-icon="none" :default-value="new Date()" v-model="endTime" value-format="yyyy-MM-dd HH:mm:ss" size="mini" align="right" type="datetime" :picker-options="datepickerOptions"
              @change="endTimeChange" placeholder="结束时间" style="width: 155px; margin-right: 3px; z-index: 9999"></el-date-picker>
          </template>

          <template v-else>
            <!-- <Date-picker type="date" :value="endTime"  @on-change="endTimeChange" :options="datepickerOptions"  placeholder="结束时间" style="width: 155px;margin-left:3px;"></Date-picker> -->
            <el-date-picker prefix-icon="none" :default-value="new Date()" v-model="startTime" value-format="yyyy-MM-dd HH:mm:ss" size="mini" type="date" :picker-options="datepickerOptions" @change="startTimeChange"
              placeholder="开始时间" style="width: 155px; margin-right: 3px; z-index: 9999"></el-date-picker>至
            <el-date-picker prefix-icon="none" :default-value="new Date()" v-model="endTime" value-format="yyyy-MM-dd HH:mm:ss" size="mini" align="right" type="date" :picker-options="datepickerOptions"
              @change="endTimeChange" placeholder="结束时间" style="width: 155px; margin-right: 3px; z-index: 9999"></el-date-picker>
          </template>
        </div>
        <div v-else class="schedule_time_text">
          {{ currentAgenda.STARTTIME }}至{{ currentAgenda.ENDTIME }}
        </div>
      </div>

      <div class="is_allday" v-if="newCalendarTitle == 1 || newCalendarTitle == 4">
        <span></span>
        <div @click="isAllday = !isAllday">
          <Checkbox v-model="isAllday"></Checkbox>全天
        </div>
      </div>
      <div class="is_repeat">
        <span></span>
        <select v-model="repeatPlan" v-if="newCalendarTitle == 1 || newCalendarTitle == 4">
          <option v-for="(item, index) in repeatPlanList" :value="item.value" :key="'repeat_' + index">
            {{ item.text }}
          </option>
        </select>
        <div v-else>
          {{
              currentAgenda.REPEATPLAN
                ? repeatPlanList[currentAgenda.REPEATPLAN]
                  ? repeatPlanList[currentAgenda.REPEATPLAN].text
                  : "无计划"
                : "无计划"
            }}
        </div>
      </div>

      <div class="repeat_time" v-if="(newCalendarTitle == 1 || newCalendarTitle == 4) && repeatPlan!==0">
        <span></span>
        <div class="repeat_time_wrap">
          <!-- <Date-picker type="datetime" :value="endRemindTime" @on-change="endRemindTimeChange" :options="datepickerOptions" placeholder="结束重复时间" style="width: 100%"></Date-picker> -->
          <el-date-picker prefix-icon="none" v-model="endRemindTime" value-format="yyyy-MM-dd HH:mm:ss" size="mini" type="datetime" @change="endRemindTimeChange" placeholder="结束重复时间" style="width: 100%; z-index: 9999">
          </el-date-picker>
        </div>
      </div>
      <div class="repeat_time_2" v-if="(newCalendarTitle == 1 || newCalendarTitle == 4) && repeatPlan == 6">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="重复频率">
            每
            <select v-model="form.schedulerType" @change="form.repeatRate = ''">
              <option label="周" value="6"></option>
              <option label="月" value="5"></option>
              <option label="年" value="7"></option>
            </select>
            <select v-model="form.repeatRate" v-if="form.schedulerType == 6">
              <option v-for="item in weekdayList" :label="item.text" :value="item.value" :key="'repeat_'+item.text">
              </option>
            </select>
            <el-date-picker v-if="form.schedulerType == 5" v-model="form.repeatRate" align="right" type="date" format='d' value-format='d' placeholder="选择日期">
            </el-date-picker>
            <el-date-picker v-if="form.schedulerType == 7" v-model="form.repeatRate" align="right" type="date" format='M-d' value-format='M-d' placeholder="选择日期">
            </el-date-picker>
            <!-- <el-select width='20px' v-model="form.region" placeholder="请选择活动区域">
                <el-option label="周" value="0"></el-option>
                <el-option label="月" value="1"></el-option>
                <el-option label="年" value="2"></el-option>
              </el-select> -->
          </el-form-item>
          <el-form-item label="重试次数" v-if="!endRemindTime">
            <el-input v-model="form.repeatTimes"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="repeat_time" v-else-if="newCalendarTitle !== 1">
        <span></span>
        <div class="repeat_time_text">
          <span v-if="currentAgenda.ENDREMINDTIME == '9999-01-01 00:00:00'">无截止时间</span>
          <span v-else>{{ currentAgenda.ENDREMINDTIME }}截止</span>
        </div>
      </div>

      <!-- <div v-if="currentAgenda.ENDREMINDTIME == '9999-01-01 00:00:00'" class="repeat_time_text"></div> -->

      <div class="reminder_time">
        <span></span>
        <select v-if="newCalendarTitle == 1 || newCalendarTitle == 4" v-model="remindTime">
          <option v-for="(item, index) in remindTimeList" :value="item.value" :key="'remind_' + index">
            {{ item.text }}
          </option>
        </select>
        <div v-else>
          {{
              currentAgenda.REMINDTIME
                ? remindTimeList[currentAgenda.REMINDTIME]
                  ? remindTimeList[currentAgenda.REMINDTIME].text
                  : "无提醒时间"
                : "无提醒时间"
            }}
        </div>
      </div>
      <div class="calendar_footer">
        <div v-if="newCalendarTitle == 1 || newCalendarTitle == 4" style="display: flex">
          <span @click.stop.prevent="scheduleSub" class="calendar_adopt">确定</span><span class="calendar_refuse" @click="calendar_close">取消</span>
        </div>
        <span v-else @click="calendar_close" style="margin-left: 0" class="calendar_close">关闭</span>
      </div>
    </div>
  </div>
</template>
           
<script>
import { addSchedule } from "../../api/home";
export default {
  props: [
    "newCalendarShow",
    "newCalendarTitle",
    "currentAgenda",
    "form",
    "myInfo",
    "participant",
  ],

  data() {
    return {
      remindTime: 0,
      isAllday: false,
      startTime: "",
      endTime: "",
      scheduleText: "", //日程内容
      scheduleAddress: "",
      endRemindTime: "",
      repeatPlan: 0,
      weekdayList: [
        {
          value: 1,
          text: "一",
        },
        {
          value: 2,
          text: "二",
        },
        {
          value: 3,
          text: "三",
        },
        {
          value: 4,
          text: "四",
        },
        {
          value: 5,
          text: "五",
        },
        {
          value: 6,
          text: "六",
        },
        {
          value: 7,
          text: "日",
        },
      ],
      remindTimeList: [
        {
          value: 0,
          text: "无提醒",
        },
        {
          value: 1,
          text: "开始时提醒",
        },
        {
          value: 2,
          text: "5分钟前提醒",
        },
        {
          value: 3,
          text: "15分钟前提醒",
        },
        {
          value: 4,
          text: "30分钟前提醒",
        },
        {
          value: 5,
          text: "1小时前提醒",
        },
        {
          value: 6,
          text: "2小时前提醒",
        },
        {
          value: 7,
          text: "1天前提醒",
        },
        {
          value: 8,
          text: "2天前提醒",
        },
        {
          value: 9,
          text: "一周前提醒",
        },
      ],
      repeatPlanList: [
        {
          value: 0,
          text: "不重复提醒",
        },
        {
          value: 1,
          text: "每天提醒",
        },
        {
          value: 2,
          text: "每周提醒",
        },
        {
          value: 3,
          text: "每两周提醒",
        },
        {
          value: 4,
          text: "每月提醒",
        },
        {
          value: 5,
          text: "每年提醒",
        },
        {
          value: 6,
          text: "自定义周期",
        },
      ],
      datepickerOptions: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
    };
  },

  methods: {
    delSchedule() {
      this.$emit("delSchedule");
    },
    newCalendarClick(title) {
      console.log(title, 313);
      this.$emit("newCalendarClick", title);
    },
    addReminders() {
      this.$emit("showContacts");
      //   this.modalTitle = 5;
      //   this.modalFirst = true;
    },
    location() {
      let res = this.$getAddress("GetIPAddress", []);
      res = JSON.parse(res);
      if (res.return_code) {
        this.scheduleAddress = res.return_msg;
      }
    },
    endTimeChange(date) {
      this.endTime = date;
      let currenDate = new Date().getTime();
      if (new Date(date).getTime() < currenDate) {
        this.$Message.warning("您的选择已超时,请重新选择");
        return;
      }
      if (this.startTime != "") {
        if (!date) {
          return;
        }
        if (new Date(date).getTime() < new Date(this.startTime).getTime()) {
          this.$Message.warning("时间不可逆流,请重新选择");
          return;
        }
      }
    },
    startTimeChange(date) {
      this.startTime = date;
      let currenDate = new Date().getTime();
      if (new Date(date).getTime() < currenDate) {
        this.$Message.warning("您的选择已超时,请重新选择");
        return;
      }
      if (this.endTime != "") {
        if (new Date(date).getTime() > new Date(this.endTime).getTime()) {
          this.$Message.warning("时间不可逆流,请重新选择");
          return;
        }
      }
    },
    editEvent() {
      this.scheduleText = this.currentAgenda.THEME; // 日程内容
      this.scheduleAddress = this.currentAgenda.PLACE; // 地址
    },
    editEvent2() {
      this.startTime = this.currentAgenda.STARTTIME; // 开始时间
      this.endTime = this.currentAgenda.ENDTIME; // 结束时间
      this.isAllday = this.currentAgenda.ISALLDAY == 0 ? true : false; // 是否全天
      this.remindTime = this.currentAgenda.REMINDTIME;
      this.endRemindTime = this.currentAgenda.ENDREMINDTIME; // 截止时间
      this.repeatPlan = this.currentAgenda.REPEATPLAN;
    },
    addCalendar() {
      // 新增日程初始化默认值
      this.scheduleText = ""; // 日程内容
      this.scheduleAddress = ""; // 地址
      //   this.participant = this.checkPersonArray = []; // 日程提醒人员<==>添加日程提醒组件人员
      this.startTime = ""; // 开始时间
      this.endTime = ""; // 结束时间
      this.isAllday = false; // 是否全天
      this.remindTime = 0;
      this.endRemindTime = ""; // 截止时间
      this.repeatPlan = 0;
    },
    calendar_close() {
      this.$emit("calendar_close");
    },
    endRemindTimeChange(date) {
      this.endRemindTime = date;
      let currenDate = new Date().getTime();
    },
    scheduleSub() {
      //zk注释，日程添加至后台
      if (this.scheduleText.trim() == "") {
        this.$Message.warning("请输入日程内容");
        return;
      }
      if (this.participant.length <= 0) {
        this.$Message.warning("请添加提醒人员");
        return;
      }
      if (this.startTime == "") {
        this.$Message.warning("请选择开始时间");
        return;
      }
      if (this.endTime == "") {
        this.$Message.warning("请选择结束时间");
        return;
      }
      if (this.repeatPlan == 0) {
        this.endRemindTime == "";
      } else {
        if (this.endRemindTime == "" || this.endRemindTime == null) {
          this.$Message.warning("请选择结束重复时间");
          return;
        }
        if (
          new Date(this.endRemindTime).getTime() <=
          new Date(this.startTime).getTime()
        ) {
          this.$Message.warning("结束重复时间不能小于开始时间");
          return;
        }
      }
      if (this.startTime.length == "10") {
        this.startTime += " 00:00:00";
      }
      if (this.endTime.length == "10") {
        this.endTime += " 00:00:00";
      }
      let member = [];
      // for (let i = 0; i < this.participant.length; i++) {
      //   if (this.participant[i].id != this.myInfo.id) {
      //     member.push(this.participant[i].id);
      //   }
      // }
      this.participant.forEach((item) => {
        member.push(item.id);
      });
      if (member.length > 0) {
        member = member.join(",");
      } else {
        member = "";
      }
      let obj = {
        theme: this.scheduleText,
        startTime: this.startTime,
        endTime: this.endTime,
        place: this.scheduleAddress,
        remindTime: this.remindTime,
        endRemindTime: this.endRemindTime,
        repeatPlan: this.repeatPlan,
        userId: this.myInfo.id,
        isAllDay: this.isAllday ? 0 : 1,
        member: member,
        moreRemindTime: "", // 新增字段作用暂不
      };
      if (this.repeatPlan == 6) {
        //添加自定义提醒参数
        Object.assign(obj, this.form);
        if (obj.repeatTimes == "") {
          obj.repeatTimes = 0;
        } else if (obj.endRemindTime) {
          obj.repeatTimes = -1;
        }
      }

      this.$emit("submit", obj);
  
    },
    scheduleAugumentsInit() {
      this.scheduleAddress = "";
      this.scheduleText = "";
      this.startTime = "";
      this.endTime = "";
      this.endRemindTime = "";
      this.isAllday = false;
      this.remindTime = 0;
      this.repeatPlan = 0;
    },
  },
  watch: {
    repeatPlan() {
      if (this.repeatPlan == 0) {
        this.isDisabled = true;
        this.endRemindTime = "";
      } else this.isDisabled = false;
    },
  },
};
</script>
<style scoped>
</style>